import React, {Component} from 'react';
import {Card, Upload} from "antd";
import {PlusOutlined} from '@ant-design/icons';
import $http from '../../untils/request'

class System extends React.Component {
    constructor() {
        super();
        this.state = {
            props: '',
            headers: {'x-csrf-token': sessionStorage.getItem('token')}
        }
    }

    componentDidMount() {
        this.getUserInfo()
    }

    render() {
        const uploadButton = (
            <div>
                <PlusOutlined/>
                <div className="ant-upload-text">上传图片</div>
            </div>
        );

        return (
            <div className='system'>
                <Card>
                    <Upload
                        onChange={(file,fileList,event) => {
                            this.onUpdataChange(file,fileList,event)
                        }}
                        action='http://127.0.0.1:8080/uploadUserPicture'
                        method='post'
                        beforeUpload={(file,fileList) => this.onUpLoad(file,fileList) }
                        headers={this.state.headers}
                        listType="picture-card"
                        onPreview={this.handlePreview}
                    >
                        {uploadButton}
                    </Upload>
                </Card>
            </div>
        );
    }

    getUserInfo() {

    }

    async onUpdataChange(file,fileList,event) {
        // const data = new FormData()
        // data.append('file',file)
        // const res = await $http.post('/upload', data)
        // console.log(res)

    }
   async onUpLoad(file,fileList) {
        console.log(file)
    }
}

export default System;
